<div class="layui-form layui-field-box">
    <div class="layui-form-item" style="margin:0;margin-top:15px;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px">活动名称</label>
            <div class="layui-input-inline layui-short-input">
                <input type="text" placeholder="活动名称" name="{{makeElUniqueName('activity_name')}}" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">活动编号</label>
            <div class="layui-input-inline layui-short-input">
                <input type="text" placeholder="活动编号" name="{{makeElUniqueName('activity_code')}}" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">活动类型</label>
            <div class="layui-input-inline layui-short-input">
                <select name="{{makeElUniqueName('partner_group_type')}}">
                    <option value="0">(所有活动类型)</option>
                    @foreach (\App\Activity::$ACTIVITY_TYPE_MAP as $item)
                        <option value='{{$item['key']}}'>{{$item['text']}}</option>
                    @endforeach
                </select>
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin:0;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px">举办活动城市</label>
            <div class="layui-input-inline layui-short-input">
                <select name="{{makeElUniqueName('activity_city')}}" lay-filter="{{makeElUniqueName('activity_city')}}"
                        lay-search>
                    <option value="0">(不限城市)</option>
                    @foreach ($properCities as $city)
                        <option value='{{$city->id}}'>{{ $city->name }}({{ $city->code }})</option>
                    @endforeach
                </select>
            </div>
            <label class="layui-form-label">活动时间</label>
            <div class="layui-input-inline layui-short-input">
                <input class="layui-input" placeholder="开始日" name="{{makeElUniqueName('start_activity_dt')}}">
            </div>
            <label class="layui-form-label">----到----</label>
            <div class="layui-input-inline layui-short-input">
                <input class="layui-input" placeholder="结束日" name="{{makeElUniqueName('end_activity_dt')}}">
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin:0;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px">举办团队</label>
            <div class="layui-input-inline layui-long-input" style="width:440px !important">
                <input type="text" placeholder="志愿者团队名称/营业执照号/本平台编号" name="{{makeElUniqueName('group_name')}}"
                       autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-inline layui-short-input">
                <input type="text" placeholder="用户名称" name="{{makeElUniqueName('user_name')}}" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin:0;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px"></label>
            <div class="layui-input-inline layui-long-input">
                <button class="layui-btn" lay-filter="{{makeElUniqueName('search_user_apply_activity')}}"><i
                            class="layui-icon">
                        &#xe615;</i> 搜索
                </button>
                &nbsp;
                <button class="layui-btn layui-btn-normal" lay-filter="{{makeElUniqueName('add_activity')}}"><i
                            class="layui-icon">&#xe654; </i> 新增
                </button>
            </div>
            <label class="layui-form-label"></label>
            <div class="layui-input-inline layui-short-input">
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>
</div>
<div id="{{makeElUniqueName('tbUserApplyActivity')}}"></div>
<script>
    layui.use(['jfTable', 'form', 'addressUtil', 'dateRangeUtil'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var jfTable = layui.jfTable;
        var form = layui.form();
        var addressUtil = layui.addressUtil;
        var dateRangeUtil = layui.dateRangeUtil;

        form.render();

        dateRangeUtil.makeDateRange({
            startElem: $('input[name=\'{{makeElUniqueName('start_create_dt')}}\']'),
            endElem: $('input[name=\'{{makeElUniqueName('end_create_dt')}}\']')
        });

        dateRangeUtil.makeDateRange({
            startElem: $('input[name=\'{{makeElUniqueName('start_activity_dt')}}\']'),
            endElem: $('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']')
        });

        layui.define(function (exports) {
            var obj = {
                doAudit: function (activityId) {
                    $.post('/activity/api/user_apply_audit/index', {id:activityId}, function (str) {
                        var popLayerUtil = layui.popLayerUtil;
                        popLayerUtil.doPopUp({
                            index: layer.open({
                                id: '{{makeElUniqueName('doUserApplyAudit')}}',
                                title: '审批用户申请',
                                type: 1,
                                content: str,
                                area: ['800px', '570px']
                            }),
                            onClose: function () {
                                layui.toauditQueryFuncs.refreshTableGrid();
                            }
                        });
                    });
                },
                refreshTableGrid: function () {
                    $('input[name=\'{{makeElUniqueName('activity_name')}}\']').val('');
                    $("#{{makeElUniqueName('tbUserApplyActivity')}}").jfTable("reload");
                }
            };
            exports('toauditQueryFuncs', obj);
        });

        $("#{{makeElUniqueName('tbUserApplyActivity')}}").jfTable({
            url: '/activity/api/user_apply_audit/query',
            pageSize: 5,
            page: true,
            skip: true,
            first: '首页',
            last: '尾页',
            columns: [{
                text: '操作',
                name: 'id',
                width: 120,
                align: 'center',
                formatter: function (value, dataItem, index) {
                    var html = '<a class="layui-btn layui-btn-small layui-btn-warning" onclick="layui.toauditQueryFuncs.doAudit(' + value + ')"><i class="layui-icon">&#xe618;</i> 审核</a>';
                    return html;
                }
            }, {
                text: '申请人姓名',
                name: 'users.name',
                width: 100,
                align: 'center',
            }, {
                text: '活动名称',
                name: 'activities.subject',
                width: 170,
                align: 'center',
            }, {
                text: '活动组织单位',
                name: 'majorGroup.name',
                width: 170,
                align: 'center',
            }, {
                text: '申请活动所在城市',
                name: 'cities.name',
                width: 170,
                align: 'center',
            }, {
                text: '活动登记时长(H)',
                name: 'activities.time_length',
                width: 120,
                align: 'center',
            }, {
                text: '活动时间',
                name: 'activities',
                width: 250,
                align: 'center',
                formatter: function (value, dataItem, index) {
                    return dataItem.activities.active_time_start.substring(0, dataItem.activities.active_time_start.length - 3)
                            + ' <span style="color:orange">-</span> '
                            + dataItem.activities.active_time_end.substring(0, dataItem.activities.active_time_end.length - 3);
                }
            }
            ],
            method: 'post',
            queryParam: {
                subject: $('input[name=\'{{makeElUniqueName('activity_name')}}\']').val(),
                code: $('input[name=\'{{makeElUniqueName('activity_code')}}\']').val(),
                activityType: $('select[name=\'{{makeElUniqueName('partner_group_type')}}\']').val(),
                cityId: $('select[name=\'{{makeElUniqueName('activity_city')}}\']').val(),
                startActiveDt:$('input[name=\'{{makeElUniqueName('start_activity_dt')}}\']').val(),
                endActiveDt:$('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() != ''? ($('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() + ' 23:59:59'):'',
                volunteerGroupInfo: $('input[name=\'{{makeElUniqueName('group_name')}}\']').val(),
                userName: $('input[name=\'{{makeElUniqueName('user_name')}}\']').val(),
            },
            toolbarClass: 'layui-btn-small',
            onBeforeLoad: function (param) {
                console.log(param);
                return $.extend(param, {
                    subject: $('input[name=\'{{makeElUniqueName('activity_name')}}\']').val(),
                    code: $('input[name=\'{{makeElUniqueName('activity_code')}}\']').val(),
                    activityType: $('select[name=\'{{makeElUniqueName('partner_group_type')}}\']').val(),
                    cityId: $('select[name=\'{{makeElUniqueName('activity_city')}}\']').val(),
                    startActiveDt:$('input[name=\'{{makeElUniqueName('start_activity_dt')}}\']').val(),
                    endActiveDt:$('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() != ''? ($('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() + ' 23:59:59'):'',
                    volunteerGroupInfo: $('input[name=\'{{makeElUniqueName('group_name')}}\']').val(),
                    userName: $('input[name=\'{{makeElUniqueName('user_name')}}\']').val(),
                });
            },
            onLoadSuccess: function (data) {
                return data;
            },
            dataFilter: function (data) {
                return data;
            }
        });

        $('.layui-btn[lay-filter=\'{{makeElUniqueName('search_user_apply_activity')}}\']').on('click', function () {
            $("#{{makeElUniqueName('tbUserApplyActivity')}}").jfTable("reload");
        });
    });
</script>
